@use '../../style' as theme;
@use '../../style/mixins' as mixins;
@use "sass:math";

$btn-prefix-cls: '#{theme.$prefix}-tag';

.#{$btn-prefix-cls} {
  @include mixins.tag;

  &-shape-rect {

  }

  &-shape-circle {

  }

  & .#{$btn-prefix-cls}-closeWrapper {
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    height: 100%;
    align-items: center;
  }

  &-closable-disabled {
    .#{$btn-prefix-cls}-closeWrapper {
      cursor: not-allowed;
    }

    opacity: 0.2;
    cursor: not-allowed;
  }

  &-size-large {
    & {
      font-size: theme.$large-font-size;
      padding: theme.$tag-large-padding-vertical theme.$tag-large-padding-horizontal;
      height: theme.$tag-large-height;
      min-width: theme.$tag-large-min-width;
    }

    & .#{$btn-prefix-cls}-closeWrapper {
      .icon {
        // TODO:: large大小下面，通过直接获取large height的高度显的太高，暂时手动设置
        height: 20px;
        width: 20px;
      }
    }
  }

  &-size-middle {
    & {
      font-size: theme.$middle-font-size;
      padding: theme.$tag-middle-padding-vertical theme.$tag-middle-padding-horizontal;
      height: theme.$tag-middle-height;
      min-width: theme.$tag-middle-min-width;
    }

    & .#{$btn-prefix-cls}-closeWrapper {
      .icon {
        height: math.div(theme.$tag-middle-height, 2);
        width: math.div(theme.$tag-middle-height, 2);
      }
    }
  }

  &-size-small {
    & {
      font-size: theme.$small-font-size;
      padding: theme.$tag-small-padding-vertical theme.$tag-small-padding-horizontal;
      height: theme.$tag-small-height;
      min-width: theme.$tag-small-min-width;
    }

    & .#{$btn-prefix-cls}-closeWrapper {
      .icon {
        height: theme.$tag-small-height;
        width: theme.$tag-small-height;
      }
    }
  }

  /**
    默认颜色样式增加hover效果
  */

  &-color-default {
    &.#{$btn-prefix-cls}-selectable:hover {
      @include mixins.color(theme.$theme-color, theme.$theme-color, theme.$theme-color-level1);
    }

    &.#{$btn-prefix-cls}-closeWrapper {
      .icon {
        color: theme.$theme-color-level1;
      }
    }
  }

  &-color-success {
    @include mixins.color(theme.$green-base, theme.$green-1, theme.$green-base);

    &.#{$btn-prefix-cls}-selectable:hover {
      @include mixins.color(theme.$green-base, theme.$green-2, theme.$green-base);
    }

    /**
      TODO:: svg icon无法颜色替换 需要更换成font icon
     */
    &.#{$btn-prefix-cls}-closeWrapper {
      .icon {
        color: theme.$green-base;
      }
    }
  }

  &-color-info {
    @include mixins.color(theme.$blue-base, theme.$blue-1, theme.$blue-base);

    &.#{$btn-prefix-cls}-selectable:hover {
      @include mixins.color(theme.$blue-base, theme.$blue-2, theme.$blue-base);
    }

    &.#{$btn-prefix-cls}-closeWrapper {
      .icon {
        color: theme.$blue-base;
      }
    }
  }

  &-color-error {
    @include mixins.color(theme.$red-base, theme.$red-1, theme.$red-base);

    &.#{$btn-prefix-cls}-selectable:hover {
      @include mixins.color(theme.$red-base, theme.$red-2, theme.$red-base);
    }
  }

  &-color-warning {
    @include mixins.color(theme.$orange-base, theme.$orange-1, theme.$orange-base);

    &.#{$btn-prefix-cls}-selectable:hover {
      @include mixins.color(theme.$orange-base, theme.$orange-2, theme.$orange-base);
    }
  }
}
